<template>
	<view class="food">
		<text class="title">材料:</text>
		<view class="list">
			<view class="item u-flex u-row-between" v-for="val,index of list" :key="index">
				<text>{{index}}</text>
				<text>{{val}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				list: []
			}
		},
		props: {
			item: {
				type: Object,
				default: {}
			}
		},
		watch: {
			item(){
				this.list = JSON.parse(this.item.material)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.food{
		background-color: $uni-bg-color;
		margin-top: $uni-spacing-col-base;
		padding: $uni-spacing-col-base $uni-spacing-row-base;
		.title{
			font-size: $uni-font-size-subtitle;
			font-weight: bold;
		}
		.list{
			.item{
				padding: $uni-spacing-col-base 0;
				padding-right: $uni-spacing-row-lg;
				text:last-child{
					color: $uni-text-color-grey;
				}
			}
		}
	}
</style>
